<template>
  <view class="container">
    <view class="content">
      <view class="logo-wrapper">
        <u-icon name="account" size="100" color="#42b479" :custom-style="{marginBottom: '20rpx',marginTop: '80rpx'}"></u-icon>
        <text class="welcome-text">欢迎回来</text>
        <text class="sub-text">登录您的账户</text>
      </view>

      <view class="wrapper">
        <view class="input-content">
          <u-form :model="form" ref="uForm">
            <u-form-item>
              <u-input placeholder="请输入用户名/手机号" v-model="form.account" type="text"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="account" size="40" color="#999"></u-icon>
            </u-form-item>

            <u-form-item>
              <u-input type="password" placeholder="请输入密码" v-model="form.password"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="lock" size="40" color="#999"></u-icon>
            </u-form-item>

            <u-form-item class="captcha_box">
              <u-input v-model="form.captcha_code" placeholder="请输入验证码"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="photo" size="40" color="#999"></u-icon>
              <image slot="right" class="captcha" @click="getCaptcha()" :src="captcha.img" mode="aspectFit"></image>
            </u-form-item>
          </u-form>
        </view>

        <view class="btn-box">
          <button type="primary" :disabled="!form.agree" class="confirm-btn" @click="login()">
            登录
          </button>
        </view>

        <view class="agreement-section">
          <label class="agreement-label">
            <u-checkbox
              class="agreement-checkbox"
              v-model="form.agree"
              active-color="#42b479"
              size="36">
            </u-checkbox>
            <text class="agreement-text">我已阅读并同意</text>
          </label>
          <text class="agreement-link" @click="gotoPath('/pages/packageA/h5/article?key=register',false)">《注册协议》</text>
          <text class="agreement-text">和</text>
          <text class="agreement-link" @click="gotoPath('/pages/packageA/h5/article?key=privacy',false)">《隐私政策》</text>
        </view>
      </view>

      <view class="other-section">
        <view class="other-login-methods">
          <text class="other-login-title">其他登录方式</text>
          <view class="methods">
            <view class="method-item" @click="gotoPath('/pages/login/code',false)">
              <u-icon name="phone" size="56" color="#42b479"></u-icon>
              <text class="method-text">短信登录</text>
            </view>
            <view class="method-item" v-if="is_wx" @click="wxlogin">
              <u-icon name="weixin-fill" size="56" color="#09bb07"></u-icon>
              <text class="method-text">微信登录</text>
            </view>
          </view>
        </view>

        <view class="bottom-section">
          <text @click="gotoPath('/pages/login/register',false)" class="bottom-link">注册账号</text>
          <text class="separator">|</text>
          <text class="bottom-link" @click="gotoPath('/pages/login/forget_pwd',false)">忘记密码</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import code_api from "@/common/code_api";
import user_api from "@/common/user_api";

export default {
  data() {
    return {
      is_wx: false,
      form: {
        agree: false,
        account: '',
        password: '',
        captcha_key: '',
        captcha_code: '',
      },
      captcha: {},
      mobile: '',
      password: '',
      options: {},
    }
  },
  onLoad(option) {
    this.options = option
    this.getCaptcha()
    // #ifdef MP
    this.is_wx = true
    // #endif
    if (option.account) {
      this.form.account = option.account
    }
  },
  onShow() {
    this.$store.dispatch('getUserInfo')
    //返回首页，防止反复点击回退
    if (this.hasLogin) {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  },

  methods: {
    // #ifdef MP
    wxlogin() {
      if (!this.form.agree) {
        this.$u.toast('请先同意注册协议')
        return
      }
      uni.showModal({
        title: '是否使用微信登录',
        content: '若不存在账号则自动创建新账号，是否继续？',
        confirmText: '确定',
        cancelText: '取消',
        success: res => {
          if (res.confirm) {
            uni.showLoading({
              title: '正在登录....'
            })
            getCode()
            uni.hideLoading()
          }
        }
      })
    },
    // #endif

    login() {
      if (!this.form.agree) {
        this.$u.toast('请先同意注册协议')
        return
      }
      if (!this.form.account) {
        this.$u.toast('请输入账号');
        return;
      }
      if (!this.form.password) {
        this.$u.toast('请输入密码');
        return;
      }
      if (!this.form.captcha_code) {
        this.$u.toast('请输入验证码');
        return;
      }

      let data = {
        ...this.form
      }
      let that = this
      data.captcha_key = this.captcha.key
      this.$store.dispatch('login', data).then(res => {
        //console.log(res);return;
        if (res.code === 0) {
          this.$u.toast('登录成功');
          this.$store.dispatch('getUserInfo').then(res => {
            if (that.options.from) {
              that.goBack(that.options)
            } else {
              return that.gotoPath('/pages/index/index', true, null, 2)
            }
          })
        } else {
          this.$u.toast(res.msg);
          this.getCaptcha()
        }
      })
    },

    //回跳
    goBack(options) {
      let from = options.from
      //移除from
      delete options.from
      if (from === 'cart') {
        return this.gotoPath('/pages/cart/index', true, options, 2)
      }
      if (from === 'order_list') {
        return this.gotoPath('/pages/packageA/order/index', true, options, 1)
      }
      if (from === 'goods_detail') {
        return this.gotoPath('/pages/goods/detail', true, options, 1)
      }
      if (from === 'order_detail') {
        return this.gotoPath('/pages/packageA/order/detail', true, options, 1)
      }
      if (from === 'my_coupon') {
        return this.gotoPath('/pages/packageA/coupon/my', true, options, 1)
      }
      if (from === 'coupon_list') {
        return this.gotoPath('/pages/packageA/coupon/index', true, options, 1)
      }
      if (from === 'address_list') {
        return this.gotoPath('/pages/packageA/address/index', true, options, 1)
      }
      if (from === 'user_center') {
        return this.gotoPath('/pages/packageA/user/center', true, options, 1)
      }
      if (from === 'invoice') {
        return this.gotoPath('/pages/packageA/invoice/index', true, options, 1)
      }
      return this.gotoPath('/pages/index/index', false, null, 2)
    },

    getCaptcha() {
      code_api.captcha().then(res => {
        this.captcha = res.data.captcha
      })
    }
  },
}
</script>

<style lang='scss'>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  width: 90%;
  max-width: 650rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
  box-sizing: border-box;
}

.logo-wrapper {
  text-align: center;
  margin-bottom: 50rpx;

  .welcome-text {
    font-size: 42rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 15rpx;
    display: block;
  }

  .sub-text {
    font-size: 30rpx;
    color: #999;
    display: block;
  }
}

.wrapper {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 100%;
  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
  box-sizing: border-box;
}

.input-content {
  margin-bottom: 30rpx;

  ::v-deep .u-form-item {
    padding: 10rpx 0;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .u-input {
      background-color: #f8f9fa;
      border-radius: 14rpx;
      padding-left: 24rpx;
      height: 80rpx;
      font-size: 32rpx;
    }
  }
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background: linear-gradient(90deg, #42b479 0%, #3aa36b 100%);
  color: #fff;
  font-size: 36rpx;
  margin-top: 20rpx;

  &:after {
    border: none;
  }

  &[disabled] {
    background: #c0c4cc;
  }
}

.agreement-section {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .agreement-label {
    display: flex;
    align-items: center;
    margin-right: 12rpx;
  }

  ::v-deep .u-checkbox {
    margin-right: 12rpx;
  }

  .agreement-text {
    font-size: 28rpx;
    color: #999;
  }

  .agreement-link {
    color: #42b479;
    margin: 0 8rpx;
    cursor: pointer;
    font-size: 28rpx;
  }
}

.other-section {
  width: 100%;
}

.other-login-methods {
  .other-login-title {
    display: block;
    text-align: center;
    color: #999;
    font-size: 28rpx;
    position: relative;
    margin-bottom: 40rpx;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 25%;
      height: 1px;
      background: #eee;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }
  }

  .methods {
    display: flex;
    justify-content: center;

    .method-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 35rpx;
      cursor: pointer;

      .method-text {
        margin-top: 15rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.bottom-section {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .bottom-link {
    color: #42b479;
    font-size: 30rpx;
    cursor: pointer;
    padding: 0 15rpx;
  }

  .separator {
    color: #ccc;
    padding: 0 15rpx;
    font-size: 30rpx;
  }
}

.captcha_box {
  .captcha {
    width: 200rpx;
    height: 70rpx;
    border-radius: 10rpx;
  }
}

// 隐藏原有元素
.title,
.register-section,
.wx {
  display: none;
}
</style>
